import React, { Component } from "react";
import styled from "styled-components";
import Proptypes from "prop-types";

import add from "./add.module.less";

class Add extends Component {
  static propTypes = {
    addComment: Proptypes.func.isRequired,
  };
  state = {
    comment: "",
    username: "",
  };
  add = () => {
    const { addComment } = this.props;
    let comment = {
      username: this.state.username,
      content: this.state.comment,
    };
    addComment(comment);
  };
  changeUsername = (e) => {
    const username = e.target.value;
    this.setState({
      username,
    });
  };
  changeComment = (e) => {
    const comment = e.target.value;
    this.setState({
      comment,
    });
  };
  render() {
    let { comment, username } = this.state;
    return (
      <Wrapper>
        <div className="input-group">
          用户名:
          <input
            type="text"
            className="form-control"
            required="required"
            value={username}
            onChange={this.changeUsername}
          />
        </div>
        <div className="input-group" style={{ margin: "2% 0px" }}>
          评论:
          <textarea
            id="input"
            style={{
              resize: "none",
            }}
            className="form-control"
            rows="3"
            required="required"
            value={comment}
            onChange={this.changeComment}
          ></textarea>
        </div>
        <button
          type="button"
          className={`btn btn-default ${add.Button}`}
          onClick={this.add}
        >
          评论
        </button>
      </Wrapper>
    );
  }
}

const Wrapper = styled.div`
  div,
  button {
    width: 100%;
  }
`;
export default Add;
